<template>
  <div class="topic">
    <div class="title">专题精选</div>
    <van-swipe :loop="false" :width="350" :show-indicators="false">
      <van-swipe-item v-for="item in topicList" :key="item.id">
        <img :src="item.item_pic_url" alt="" />
        <h4>
          {{ item.title
          }}<span class="price"
            >￥ {{ item.price_info | priceFilter }} 元起</span
          >
        </h4>
        <p>{{ item.subtitle }}</p>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  props: ["topicList"],
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {},
  //   filters: {
  //     // 价格过滤器，所有价格保留两位小数
  //     priceFilter(money) {
  //       return money.toFixed(2);
  //     },
  //   },
};
</script>

<style scoped lang="less">
.topic {
  background: #fff;
  margin: .1rem 0;
  padding-bottom: 0.2rem;
  .title {
    height: 0.5rem;
    line-height: 0.5rem;
    text-align: center;
  }
  .van-swipe-item {
    // border: 1px solid red;
    padding-left: 0.1rem;
    box-sizing: border-box;
    img {
      width: 100%;
      height: 1.92rem;
    }
    h4 {
      height: 0.4rem;
      line-height: 0.4rem;
      font-weight: normal;
      margin: 0;
    }
    p {
      color: #666;
      font-size: 0.12rem;
      width: 80%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .price {
      color: darkred;
      line-height: 0.4rem;
      height: 0.4rem;
      margin-left: 0.08rem;
    }
     //代表上一级选择器
    &:last-child {
          padding-right: 10px;
        }
  }
}
</style>
